<template>
	<view class="u-content">
		<view class="details">
			<view class="dtitle">
				<view class="ititle">
					{{pagesData.donationName}}
				</view>
				<view class="ibtn">
					活动详情
				</view>
			</view>
			<view class="dcont">
				<view class="gtitle">
					<image src="../../static/require/logistics.png" mode=""></image>
					<text>物流方式：捐赠者送货上门/捐赠者自主寄送</text>
				</view>
				<view class="gcont">
					<view class="cone">
						<text class="tont">接收人姓名:</text>
						<text class="tont ttwo">{{pagesData.recipient}}</text>
					</view>
					<view class="cone">
						<text class="tont">接收人联系方式:</text>
						<text class="tont ttwo">{{personInfo.recipientPhone}}</text>
					</view>
					<view class="cone">
						<text class="tont">物资接受地:</text>
						<text class="tont ttwo">{{personInfo.address}}</text>
					</view>
				</view>
			</view>
		</view>

		<u-modal v-model="showLogisticsTip" :show-title="false" :show-confirm-button="false" width="520rpx">
			<view class="tip">
				<image src="../../static/require/cancel.png" mode="" @click="closePop"></image>
				<view class="tinfo">
					您还没有填写邮寄信息，确定要返回码？
				</view>
				<view class="btnbox">
					<view class="btnone">
						返回填写
					</view>
					<view class="btntwo">
						继续退出
					</view>
				</view>
			</view>
		</u-modal>
		<view class="" @click="openPop">
			打开模态框
		</view>
		<!-- 其他信息 -->
		<view class="person-info">
			<view class="info-title">
				<view></view>
				<text>邮寄信息</text>
			</view>

			<view class="info-form">
				<view class="form-item">
					<text class="info-name">寄件人姓名：</text>
					<text>李胡兰</text>
				</view>
				<view class="form-item">
					<text class="info-name">寄件人手机号：</text>
					<text>183****5598</text>
				</view>
				<view class="form-item">
					<text class="info-name">寄件地址：</text>
					<text>江西省南昌市青山湖区</text>
				</view>
				<view class="form-item">
					<view class="info-name">
						<text>物流企业：</text>
					</view>
					<view @click="showLogistics">
						<text style="margin-right: 15rpx;">{{ logisticsType[choosed].text }}</text>
						<u-icon name="arrow-down-fill" color="#fe5745" size="28"></u-icon>
					</view>
					<u-action-sheet :cancel-btn="false" :list="logisticsType" v-model="showLogisticsType"
						@click="chooseLogistice" :safe-area-inset-bottom="true"></u-action-sheet>
				</view>
				<view class="form-item">
					<text class="info-name">物流单号：</text>
					<input type="text" placeholder="请输入物流单号" />
				</view>
			</view>
		</view>

		<!-- 捐赠物资 -->
		<view class="donate-goods">
			<view class="info-title">
				<view></view>
				<text>捐赠物资</text>
			</view>
			<view class="goods-types">
				<view
				class="goods-btn"
				v-for="(item, index) in pagesData.donationSuppliesInfoList"
				:key="index"
				:style="{ 'margin-left': index % 3 == 0 ? '0rpx' : '40rpx' }"
				:class="{ 'goods-btn-active': activeType == index }" 
				@click="changeTypes(index)">
					<text>{{ item.itemsName }}</text>
				</view>
			</view>
			<button class="add-goodstype" @click="addGoods(activeType)">添加</button>
		</view>

		<!-- 物资具体信息 -->
		<view
		class="goods-detail"
		v-for="(item, index) in items"
		:key="index">
			<view class="del" @click="delGoods(index)">
				<u-icon name="close" size="24"></u-icon>
			</view>
			<text class="detail-title">{{ item.itemsName }}</text>
			<view class="info-form">
				<!-- <view class="form-item">
					<text class="info-name">最低响应数量：</text>
					<text>50件</text>
				</view> -->
				<!-- <view class="form-item">
					<text class="info-name">品牌型号：</text>
					<input type="text" placeholder="请输入捐赠的品牌和型号" />
				</view> -->
				<view class="form-item">
					<text class="info-name" style="position: relative;left: -21rpx;">
						<span style="color: red;margin-right: 5rpx;">*</span>
						物品数量：
					</text>
					<input
					v-model="item.itemsNum"
					@input="calculateTotalPrice(index)"
					type="text"
					placeholder="请输入数量" />
				</view>
				<view class="form-item">
					<text class="info-name">物品单价：</text>
					<input
					v-model="item.itemUnitPrice"
					@input="calculateTotalPrice(index)"
					type="text"
					placeholder="请输入单价" />
				</view>
				<view class="form-item">
					<text class="info-name">物品总价：</text>
					<input type="text" v-model="item.itemTotalPrice" placeholder="请输入总价" />
				</view>
				<!-- <view class="form-item" style="border: none;">
					<text class="info-name">物品要求：</text>
					<text>全新【春秋装】</text>
				</view> -->
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="btn-box" @click="saveIfo">
			<!-- <button class="save-btn">确认</button> -->
			<text>确认</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personType: 0, // 判断为企业还是个人
				anonymity: false, // 是否匿名
				showLogisticsTip: true, // 物流提示弹窗是否显示
				needInvoice: true, // 是否需要发票
				activeType: 0, // 选择捐赠物资类型
				showLogisticsType: false,
				choosed: 0,
				items: [],
				pagesData:{},
				personInfo: {
					address: '', // 物资接收地
					// contacts: '', // 联系人
					// contactsAddress: '', // 联系地址
					// contactsPhone: '', // 联系人电话
					disasterId: '',	// 关联灾情id
					disasterName: '',
					donationCode: '', // 活动编号
					donationName: '', // 活动名称
					fileUrl: '', // 相关证明图片
					// id: 0,
					// insertTime: '',
					// inserter: 0,
					logisticsMode: '', //物流方式:1单位上门2送货上门3自主寄送
					// logisticsNum: '', //物流单号
					// modifiable: '', //是否可修改 0:是 1:否
					recipient: '', //接收人姓名
					recipientPhone: '', //接收人联系方式
					// sender: '', //寄件人姓名
					// senderAddress: '', //寄件人地址
					// senderPhone: '', //寄件人电话
					// status: '', //状态：0:已提交(待确认入库) 2:已入库(待用户确认捐赠) 3:已确认(可查看证书)
					// updateTime: '',
					// updater: 0,
					userCard: '', //捐赠人身份证号码
					userName: '', //捐赠人姓名
					userPhone: ''
					// items: [{
					// 	// getItemsCode: '', //到货物资编号
					// 	// getItemsName: '', //到货物资名称
					// 	// getItemsNum: '', //到货物资数量
					// 	// getUnitCode: '', //到货物资单位
					// 	// id: 0,
					// 	// insertTime: '',
					// 	// inserter: 0,
					// 	itemTotalPrice: '', //物品总价
					// 	itemUnitPrice: '', //物品单价
					// 	itemsCode: '', //捐赠物资编号
					// 	itemsName: '', //捐赠物资名称
					// 	itemsNum: '', //捐赠物资数量
					// 	// personId: 0, //个人捐赠信息id
					// 	// unitCode: '', //捐赠物资单位
					// 	// updateTime: '',
					// 	// updater: 0
					// }]
				},
				logisticsType: [{
						text: '中国邮政'
					},
					{
						text: '顺丰速递'
					},
					{
						text: '京东物流'
					}
				],
				goodType: ['帐篷类(帐篷)', '被服类(春秋装)', '被服类(夏装)', '药品类(口罩)', '药品类(防护服)', '应急设备类(AED)', '文体工具类(体育器材)', '被服类(被子)']
			};
		},
		onLoad() {
			// this.saveDonationInfo()
			this.getData()
		},
		methods: {
			// 保存邮寄信息
			saveIfo(){
				this.saveDonationInfo()
			},
			calculateTotalPrice(index){
				if(this.items[index].itemsNum == '' || this.items[index].itemUnitPrice == '')
				{
					this.items[index].itemTotalPrice = ''
					return 
				}
				this.items[index].itemTotalPrice = this.items[index].itemsNum * this.items[index].itemUnitPrice
			},
			// 根据活动id查询活动详情
			getData() {
				this.$ajax({
					url: '/emergency_supplies/api/gft/donation/v1/donationInfo/selectActivityDetails',
					noErrorMsg: true,
					moduleUrl: 1,
					method: 'post',
					data: {
						id: 38
					}
				}).then(res => {
					console.log('获得活动')
					console.log(res)
					if (res.code == 200) {
						this.pagesData = res.data;
			
						this.personInfo.disasterId = this.pagesData.disasterId; 
						this.personInfo.disasterName = this.pagesData.disasterName; 
						this.personInfo.donationCode = this.pagesData.donationCode;
						this.personInfo.address = this.pagesData.address;
						this.personInfo.donationName = this.pagesData.donationName;
						this.personInfo.recipient = this.pagesData.recipient;
						this.personInfo.recipientPhone = this.pagesData.recipientPhone;
					} 
			// else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none'
			// 			});
			// 		}
				});
			},
			// 删除物资
			delGoods(index) {
				uni.showModal({
					title: '删除物资',
					content: '确定删除该物资项?',
					success: res => {
						if (res.confirm) {
							this.items.splice(index, 1);
						}
					}
				});
			},
			openPop() {
				this.showLogisticsTip = true;
			},
			closePop() {
				this.showLogisticsTip = false;
			},
			changeAnonymity(content) {
				this.anonymity = content;
			},
			showTip() {
				this.showLogisticsTip = true;
			},
			changeInvoice(content) {
				this.needInvoice = content;
			},
			changeTypes(index) {
				this.activeType = index;
			},
			closePop() {
				this.showLogisticsTip = false;
			},
			showLogistics() {
				this.showLogisticsType = true;
			},
			chooseLogistice(index) {
				this.choosed = index;
			},
			// 添加物资
			addGoods(index) {
				console.log('添加了一次物资')
				this.items.push({
					itemTotalPrice: '', //物品总价
					itemUnitPrice: '', //物品单价
					itemsCode: this.pagesData.donationSuppliesInfoList[index].itemsCode, //捐赠物资编号
					itemsName: this.pagesData.donationSuppliesInfoList[index].itemsName, //捐赠物资名称
					itemsNum: '' ,//捐赠物资数量
					unitCode: this.pagesData.donationSuppliesInfoList[index].unitCode
				});
			},
			saveDonationInfo() {
				this.personInfo.items = this.items;
				this.$ajax({
					url: '/emergency_supplies/api/gft/donation/v1/donationInfo/saveDonationInfo',
					method: 'POST',
					noErrorMsg: true,
					contentType: 'application/json',
					data: this.personInfo
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			}
		}
	};
</script>

<style scoped lang="less">
	.u-content {
		padding-bottom: 40rpx;
	}

	// 标题样式
	.info-title {
		display: flex;
		align-items: center;

		view {
			width: 10rpx;
			height: 30rpx;
			margin-right: 20rpx;
			background-color: #fe5745;
		}

		text {
			color: #333333;
			font-size: 34rpx;
			font-weight: bold;
		}
	}

	.tip {
		width: 100%;
		margin-top: 100rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.tinfo {

			width: 305rpx;
			height: 102rpx;
			font-size: 30rpx;
			line-height: 54rpx;
			color: #333333;
			margin: 0 auto;
		}

		.btnbox {
			margin-top: 70rpx;
			margin-bottom: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 50rpx;

			.btnone {
				width: 190rpx;
				height: 70rpx;
				background-color: #fe5745;
				border-radius: 10rpx;
				font-size: 28rpx;
				line-height: 54rpx;
				color: #fefefe;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btntwo {
				width: 190rpx;
				height: 70rpx;
				border-radius: 10rpx;
				border: solid 2rpx #999999;
				font-size: 28rpx;
				line-height: 54rpx;
				color: #999999;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}

	}

	// 活动详情
	.details {
		padding: 40rpx 30rpx;

		.dtitle {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ititle {
				font-size: 34rpx;
				line-height: 114rpx;
				color: #333333;
			}

			.ibtn {
				width: 140rpx;
				height: 60rpx;
				border-radius: 10rpx;
				border: solid 2rpx #faa020;
				font-size: 26rpx;
				line-height: 114rpx;
				color: #faa020;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.dcont {
			.gtitle {
				image {
					width: 30rpx;
					height: 26rpx;
				}

				text {
					font-size: 26rpx;
					line-height: 114rpx;
					color: #666666;
					margin-left: 30rpx;
				}
			}

			.gcont {
				padding: 10rpx 20rpx;

				.cone {
					margin-top: 20rpx;
					font-size: 26rpx;
					line-height: 60rpx;
					color: #333333;
					display: flex;
					justify-content: space-between;

				}
			}
		}
	}

	.danate-top {
		padding: 40rpx 30rpx 68rpx 30rpx;
		margin-bottom: 80rpx;
		background-image: url(../../static/donate/img_donate_top_bg.png);
		background-size: 100% 100%;

		.top-title {
			display: flex;
			align-items: center;
			margin-bottom: 59rpx;

			text {
				font-size: 34rpx;
				color: #ffffff;
				flex: 1;
				font-weight: bold;
			}

			button {
				border-radius: 10rpx;
				border: solid 2rpx #ffffff;
				font-size: 26rpx;
				color: #ffffff;
			}
		}

		.top-process {
			.process-line {
				height: 16rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				opacity: 0.6;
			}

			.process-node {
				display: flex;

				view {
					position: relative;
					top: -40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					color: rgba(255, 255, 255, 0.7);
					font-size: 26rpx;

					image {
						width: 64rpx;
						margin-bottom: 16rpx;
					}
				}
			}
		}
	}

	// 捐赠人信息 其他信息
	.person-info {
		padding: 0rpx 30rpx;
		margin-bottom: 79rpx;

		.info-form {
			margin-left: 20rpx;

			.form-item {
				padding: 36rpx 19rpx 36rpx 0rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 28rpx;

				.info-name {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					flex: 1;

					image {
						width: 34rpx;
					}
				}

				.form-radio {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 18rpx;
					}
				}

				input {
					text-align: right;
				}

				.tip {
					border-radius: 20rpx;

					.tip-top {
						width: 100%;
						height: 150rpx;
						background-image: url(../../static/donate/img_donate_pop_top.png);
						background-size: 100% 100%;
						color: white;
						font-size: 34rpx;
						text-align: center;
						line-height: 150rpx;
						font-weight: bold;
					}

					.tip-center {
						padding: 15rpx 30rpx;
						font-size: 26rpx;
						line-height: 48rpx;
						color: #333333;
						letter-spacing: 2rpx;

						span {
							font-size: 27rpx;
							font-weight: bold;
						}
					}

					.tip-bottom {
						background-image: url(../../static/donate/img_donate_pop_bottom.png);
						background-size: 100% 100%;
						height: 150rpx;
						font-size: 32rpx;
						text-align: center;
						color: #fe5745;
						line-height: 180rpx;
						font-weight: bold;
					}
				}

				/deep/.u-border-bottom:after {
					border-bottom: solid #edf0f5;
				}
			}

			.textarea-style {
				width: calc(100% - 62rpx);
				color: #333333;
				height: 200rpx;
				padding: 29rpx 31rpx;
				background-color: #f5f5f5;
				border-radius: 6rpx;
			}
		}
	}

	// 捐赠物资
	.donate-goods {
		padding: 0rpx 30rpx;
		margin-bottom: 79rpx;

		.goods-types {
			margin-left: 20rpx;
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.goods-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: calc(33% - 40rpx);
				height: 100rpx;
				border-radius: 6rpx;
				border: solid 2rpx #fe5745;
				color: #fe5745;
				font-size: 24rpx;
				margin-bottom: 30rpx;
				text-align: center;
			}

			.goods-btn-active {
				background-image: linear-gradient(90deg, #ffada4 0%, #ff8275 41%, #fe5745 100%);
				box-shadow: 0rpx 3rpx 21rpx 0rpx rgba(254, 94, 77, 0.3);
				color: white;
			}
		}

		.add-goodstype {
			height: 80rpx;
			margin: 0rpx 20rpx;
			background-color: #fe5745;
			border-radius: 10rpx;
			color: #ffffff;
			font-size: 30rpx;
		}

		.add-goodstype:after {
			border: none;
		}
	}

	// 物资具体信息
	.goods-detail {
		padding: 20rpx 20rpx 62rpx 20rpx;
		margin: 0rpx 30rpx;
		margin-bottom: 54rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(0, 0, 0, 0.09);
		border-radius: 10rpx;

		.del {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			border-radius: 50%;
			background-color: #fe5745;
			position: relative;
			left: calc(100% - 20rpx);
			top: -20rpx;
		}

		.detail-title {
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 29rpx;
		}

		.info-form {
			.form-item {
				padding: 24rpx 6rpx 24rpx 26rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 28rpx;

				.info-name {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					flex: 1;

					image {
						width: 34rpx;
					}
				}

				input {
					text-align: right;
				}
			}
		}
	}

	// 底部按钮
	.btn-box {
		width: 80%;
		height: 100rpx;
		background-color: #fe5745;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;

		text {
			font-family: PingFang-SC-Medium;
			font-size: 28rpx;
			line-height: 114rpx;
			color: #fefefe;
		}
	}
</style>
